//重点指标实时监控
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs, Radio, Select, Button, message, DatePicker, Drawer, Collapse, Checkbox, Row, Col, Divider, Icon } from 'antd';
import styles from './DataTrend.less';
import MyTable from '../../../components/common/MyTable';
import update from 'immutability-helper';
import request from '../../../utils//request';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import Echarts_fenxi from '../echarts/Echarts_fenxi';
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
class DataTrend extends Component {
    constructor(props) {
        super(props);
        this.state = {
            series: [],
            time: [],
            selectData: [],//指标数组
            modal1Visible: false,
            tableLoading: false,
            dataSate: [],
            params: {},
            pageSize: 10,
            pageIndex: 1,
            total: 0,
            addModal: false,
            columns: [],
            options: [],
            startValue: null,
            endValue: null,
            endOpen: false,
            CheckboxData: [],
            headerFlag: true,


            zblx: [],
            zblxValue: '',

            tjfsValue: '1',

            danyisbxq: [],
            danyisbxqValue: '',

            zbxq: [],

            duoxuan_sbxqValue: [],
            duoxuan_sbxq: [],

            danyizhibiao: [],
            danyizbxq: []

        }



    }
    componentDidMount() {
        // this.findListIndicatorClassify(1)
        this.getDataByCompanyId()
    }

    onzblx = (v, b) => {
        //选取指标类型
        console.log(v, b)
        this.setState({
            zblxValue: v,
            tjfsValue: '1',
            danyisbxqValue: '',
            duoxuan_sbxqValue: [],
            selectData: [],
            zbxq: [],
            danyizhibiao: ''
        })


        //单一设备设备选取
        this.getTwoDataByEquipmentId(v)


        //单一指标设备选取
        // this.getDataByKpiClassifyId(v)
        this.getOneDataByEquipmentId(v)



    }

    getOneDataByEquipmentId = (id) => {
        request({
            url: `/sx-client/sx/kpiclassify/getOneDataByEquipmentId?equipmentId=${id}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    danyizhibiao: data.ret
                })

            }
        })
    }



    getDataByKpiClassifyId = (id) => {
        request({
            url: `/sx-client/sx/kpi/getDataByKpiClassifyId?kpiClassifyId=${id}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    duoxuan_sbxq: data.ret
                })
                message.success('请选取设备!')

            }
        })
    }

    ontjfs = (v) => {
        if (this.state.zblxValue) {
            //统计方式
            this.setState({
                tjfsValue: v,
                selectData: [],
                danyisbxq: [],
                // zblxValue:'',
            })

            if (v == 2) {
                this.setState({
                    zbxq: this.state.danyizhibiao,
                    duoxuan_sbxqValue:[],
                    duoxuan_sbxq:[]
                })
                message.success('请选取指标!')

            } else {
                this.setState({
                    zbxq: this.state.danyizbxq,
                    zblxValue: '',
                    zbxq:[],
                    danyisbxq:[],
                    danyisbxqValue:[],

                })
            }

        } else {
            message.warning('请先选取指标类型')
        }



    }

    ondanyisbxq = (v) => {
        this.setState({
            danyisbxqValue: v
        })

        this.getDataByKpiClassifyTwoId(v)
    }

    getDataByKpiClassifyTwoId = (id) => {
        //单一设备获取指标
        request({
            url: `/sx-client/sx/kpi/getDataByKpiClassifyTwoId?kpiClassifyTwoId=${id}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    zbxq: data.ret,
                    danyizbxq: data.ret,
                })

            }
        })
    }

    getTwoDataByEquipmentId = (id) => {
        //获取单一设备
        request({
            url: `/sx-client/sx/kpiclassifytwo/getTwoDataByEquipmentId?equipmentId=${id}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    danyisbxq: data.ret
                })
            }

        })
    }

    //指标类型
    getDataByCompanyId = () => {
        request({
            url: '/sx-client/sx/equipment/getDataByCompanyId?companyId=402880e5703d658801703d68a70e0000',
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    zblx: data.ret
                })
            }

        })
    }

    onSubmit = () => {
        if(!this.state.endValue){
            message.warning('请完善时间选取!')
            return
        }
        let params = {}
        if (this.state.tjfsValue == 1) {
            params = {
                codeArr: this.state.selectData,
                startTimeStr: this.state.startValue ? moment(this.state.startValue).format('YYYY-MM-DD HH:mm:ss') : '',
                endTimeStr: this.state.endValue ? moment(this.state.endValue).format('YYYY-MM-DD HH:mm:ss') : '',
            }
        } else {
            params = {
                codeArr: this.state.duoxuan_sbxqValue,
                startTimeStr: this.state.startValue ? moment(this.state.startValue).format('YYYY-MM-DD HH:mm:ss') : '',
                endTimeStr: this.state.endValue ? moment(this.state.endValue).format('YYYY-MM-DD HH:mm:ss') : '',
            }
        }

        request({
            url: '/sx-client/sx/keyindicatorfxcontroller/findHisitoryDataForQn',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                let arr = []
                data.ret.data.forEach((item) => {
                    arr.push({
                        name: item.name,
                        type: 'line',
                        yAxisIndex: 0,
                        smooth: true,
                        showSymbol: false,//控制节点显示
                        data: item.list
                    }, )
                })

                this.setState({
                    series: arr,
                    time: data.ret.time
                })
            }

        })
    }

    findListIndicatorClassify = (pid) => {//查询指标下拉
        this.setState({
            icTwoId: ''
        })
        let params = {
            hierarchy: 2,
            name: '',
            pid
        }
        request({
            url: '/sx-client/sx/classify/findListIndicatorClassify',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    options: data.ret.icList
                })

            } else {
                message.warning(`${data.err}`)
            }

        })
    }


    //自动日期开始
    //日期选择器的所有事件,包含了自定义时间选取范围(开始)
    disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;

        if (!startValue || !endValue) {
            return false;
        }

        return startValue.valueOf() > endValue.valueOf();
    }

    disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }

        let one = startValue.valueOf() + 1000 * 60 * 60 * 480;

        let noDate = Number(new Date())


        return endValue.valueOf() <= startValue.valueOf() || endValue.valueOf() >= one || endValue.valueOf() >= noDate;
    }

    onStartChange = (value) => {
        // console.log(value.valueOf())
        if (value.valueOf() > moment().valueOf()) {
            message.warning('已超出当前时间!');
            return
        }
        this.onChange('startValue', value);

    }

    handleStartOpenChange = (open) => {
        if (!open) {
            this.setState({ endOpen: true });
        }
    }

    onEndChange = (value) => {
        this.onChange('endValue', value);
    }

    handleEndOpenChange = (open) => {
        this.setState({ endOpen: open });
    }

    onChange = (field, value) => {
        this.setState({
            [field]: value,
        });
    }
    //自动日期结束



    CollapseonChange = () => {
        console.log(123)
        this.setState({
            headerFlag: !this.state.headerFlag
        })
    }

    addItem = () => {
        this.setState({
            visible: true,
        });
    }

    onClose = () => {
        this.setState({
            visible: false,
        });
    }

    handleChange = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            selectData: value
        })

        if (this.state.tjfsValue == 2) {
            this.getDataByKpiClassifyId(value)
        }
    }

    onChangeCheckbox = (checkedValues) => {
        console.log('checked = ', checkedValues);
        this.setState({
            selectData: checkedValues
        })
    }

    onduoxuansbxqValue = (v) => {
        this.setState({
            duoxuan_sbxqValue: v
        })
    }



    render() {
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '73vh';
        let tableHeight = 270;
        if (width > 1920) {
            tableHeight = 270;
            containerHeight = '80vh';
        }

        const { zblx, options, footerShow, modalBtnLoading, modalTitle, dataSate, tableLoading, pageSize, pageIndex, total, columns, startValue, endValue, endOpen, CheckboxData } = this.state
        const { danyisbxq, zbxq, duoxuan_sbxq, tjfsValue } = this.state
        return (

            <div className={styles.warp}>
                <Drawer
                    title="选取指标"
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    width={800}
                    visible={this.state.visible}
                >
                    <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeCheckbox} value={this.state.selectData}>
                        <Row>
                            {
                                zbxq.map((item) => {
                                    return (
                                        <Col span={8}>
                                            <Checkbox value={item.value}>{item.label}</Checkbox>
                                        </Col>
                                    )
                                })
                            }


                        </Row>
                    </Checkbox.Group>
                </Drawer>
                <Tabs defaultActiveKey="1" className={styles.Tabs}>
                    <TabPane tab="清能环保" key="1">
                        <div className={styles.topBox}>
                            <div style={{ width: 350, marginTop: 10 }}>
                                <span style={{ marginLeft: 10 }}>指标类型：</span>
                                <Select size='small' value={this.state.zblxValue} style={{ width: 220 }} onChange={this.onzblx}>
                                    {
                                        zblx.map((item) => {
                                            return (
                                                <Option value={item.value}>{item.label}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </div>

                            <div style={{ width: 350, marginTop: 10 }}>
                                <span style={{ marginLeft: 10 }}>统计方式：</span>
                                <Select size='small' value={this.state.tjfsValue} style={{ width: 220 }} onChange={this.ontjfs}>

                                    <Option value='1'>单一设备</Option>
                                    <Option value='2'>单一指标</Option>

                                </Select>
                            </div>



                            {
                                tjfsValue == 1 && <div style={{ width: 350, marginTop: 10 }}>
                                    <span style={{ marginLeft: 10 }}>设备选取：</span>
                                    <Select size='small' value={this.state.danyisbxqValue} style={{ width: 220 }} onChange={this.ondanyisbxq}>
                                        {
                                            danyisbxq.map((item) => {
                                                return (
                                                    <Option value={item.value}>{item.label}</Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </div>
                            }

                            {
                                tjfsValue == 2 && <div style={{ width: 350, marginTop: 10 }}>
                                    <span style={{ marginLeft: 10 }}>设备选取：</span>
                                    <Select mode="multiple" size='small' value={this.state.duoxuan_sbxqValue} style={{ width: 220 }} onChange={this.onduoxuansbxqValue}>
                                        {
                                            duoxuan_sbxq.map((item) => {
                                                return (
                                                    <Option value={item.value}>{item.label}</Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </div>
                            }


                            <div style={{ width: 600, marginTop: 10 }}>
                                <span style={{ marginLeft: 10 }}>时间选取：</span>
                                <DatePicker
                                    allowClear={false}
                                    locale={locale}
                                    disabledDate={this.disabledStartDate}
                                    showTime
                                    format="YYYY-MM-DD HH:mm:ss"
                                    size="small"
                                    value={startValue}
                                    placeholder="开始时间"
                                    onChange={this.onStartChange}
                                    onOpenChange={this.handleStartOpenChange}
                                    style={{ width: 200, marginRight: 10, marginLeft: 5 }}
                                />

                                ~<DatePicker
                                    allowClear={false}
                                    locale={locale}
                                    disabledDate={this.disabledEndDate}
                                    showTime
                                    size="small"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    value={endValue}
                                    placeholder="结束时间"
                                    onChange={this.onEndChange}
                                    open={endOpen}
                                    onOpenChange={this.handleEndOpenChange}
                                    style={{ width: 200, marginRight: 10, marginLeft: 5 }}
                                />
                            </div>


                            <div style={{ width: 350, marginTop: 10 }}>
                                <span style={{ marginLeft: 10 }}>指标选取：</span>
                                <Select
                                    style={{ width: 270 }}
                                    maxTagCount={2}
                                    placeholder="请选取"
                                    mode={tjfsValue == 1 ? "multiple" : ''}
                                    maxTagTextLength={5}
                                    onChange={this.handleChange}
                                    size='small'
                                    value={this.state.selectData}
                                    dropdownRender={menu => (
                                        <div>
                                            {menu}
                                            <Divider style={{ margin: '4px 0' }} />
                                            <div
                                                style={{ padding: '4px 8px', cursor: 'pointer' }}
                                                onMouseDown={e => e.preventDefault()}
                                                onClick={this.addItem}
                                            >
                                                <Icon type="plus" /> 更多
                                    </div>
                                        </div>
                                    )}
                                >
                                    {
                                        zbxq.map((item) => {
                                            return (
                                                <Option value={item.value}>{item.label}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            </div>


                            <div style={{ width: 200, marginTop: 10 }}>
                                <Button size='small' style={{ marginLeft: 10 }} type="primary" onClick={this.onSubmit}>查询</Button>
                                <Button size='small' style={{ marginLeft: 10 }} >重置</Button>
                            </div>

                        </div>


                        <div style={{ height: containerHeight, overflow: 'auto', position: 'relative' }} className={styles.bottomBox}>
                            <div className={styles.title}>
                                <div style={{ display: 'flex', alignItem: 'center' }}><span className={styles.ciler}></span> 历史趋势图</div>
                            </div>
                            <Echarts_fenxi series={this.state.series} time={this.state.time} />

                        </div>

                    </TabPane>
                    <TabPane tab="再生能源" key="2">
                        暂未接入...
                    </TabPane>
                    <TabPane tab="维尔利" key="3">
                        暂未接入...
                    </TabPane>
                    <TabPane tab="清运公司" key="4">
                        暂未接入...
                    </TabPane>
                </Tabs>
            </div>
        )
    }


}

export default connect()(DataTrend)